<template>
  <div class="container" v-cloak>
    <page-header></page-header>
    <div class="rent_result">
      <div style="display: flex; margin-bottom: 20px">
        <div class="rent_powerbank" v-for="item in tabList" :key="item.value">
          <img
            style="width: 52px; height: 52px; vertical-align: middle"
            :src="item.imgs"
          />
          <div class="rent_powerbank_type">{{ item.label }}</div>
        </div>
      </div>
      <div class="rent_card" v-cloak v-if="cabinetData.billing">
        <div class="rent_rules">
          {{ $t('order_pricePlan') }}
        </div>
        <div
          class="rent_rules_text"
          :style="{ 'padding-bottom': cabinetData.branchName ? '20px' : '0px' }"
          v-if="cabinetData.billing.isSystem"
        >
          <span>{{ $t('FREE_USAGE') }}</span>
        </div>
        <div class="rent_rules_text" v-else>
          <span v-if="cabinetData.billing.freeDuration">{{
            $t('billingRules1')
              .replace(
                '$order',
                cabinetData.billing.freeLimit > 0
                  ? $t(`First_order${cabinetData.billing.freeLimit}`)
                  : $t('Every_order')
              )
              .replace('$freeDuration', cabinetData.billing.freeDuration)
              .replace(
                '$times1',
                cabinetData.billing.freeDurationControlType == 1
                  ? cabinetData.billing.freeDuration > 1
                    ? $t('minute3')
                    : $t('minute2')
                  : cabinetData.billing.freeDurationControlType == 2
                  ? cabinetData.billing.freeDuration > 1
                    ? $t('hour4')
                    : $t('hour3')
                  : cabinetData.billing.freeDuration > 1
                  ? $t('days')
                  : $t('day')
              )
          }}</span>
          <span
            >{{
              $t('billingRules2')
                .replace(
                  '$thereafter',
                  cabinetData.billing.freeDuration ? $t('thereafter') : ''
                )
                .replace(/\s+$/, '')
                .replace('$amount', formatMoney(cabinetData.billing.amount))
                .replace('$cycle', cabinetData.billing.cycle)
                .replace(
                  '$times2',
                  cabinetData.billing.controlType == 1
                    ? cabinetData.billing.cycle > 1
                      ? $t('minute3')
                      : $t('minute2')
                    : cabinetData.billing.controlType == 2
                    ? cabinetData.billing.cycle > 1
                      ? $t('hour4')
                      : $t('hour3')
                    : cabinetData.billing.cycle > 1
                    ? $t('days')
                    : $t('day')
                )
            }}{{
              cabinetData.billing.dayAmount
                ? $t('punctuation1')
                : $t('punctuation2')
            }}
          </span>
          <span v-if="cabinetData.billing.dayAmount">{{
            $t('billingRules3').replace(
              '$dayAmount',
              formatMoney(cabinetData.billing.dayAmount)
            )
          }}</span>
          <span v-if="cabinetData.billing.penaltyAmount">{{
            $t('billingRules4')
              .replace(
                '$penaltyAmount',
                formatMoney(cabinetData.billing.penaltyAmount)
              )
              .replace('$maxRentDuration', cabinetData.billing.maxRentDuration)
              .replace(
                '$times3',
                cabinetData.billing.maxDurationControlType == 1
                  ? cabinetData.billing.maxRentDuration > 1
                    ? $t('minute3')
                    : $t('minute2')
                  : cabinetData.billing.maxDurationControlType == 2
                  ? cabinetData.billing.maxRentDuration > 1
                    ? $t('hour4')
                    : $t('hour3')
                  : cabinetData.billing.maxRentDuration > 1
                  ? $t('days')
                  : $t('day')
              )
          }}</span>
        </div>
        <div class="rent_merchant" v-if="cabinetData.branchName">
          <div class="rent_merchant_map">
            <img
              style="width: 56px !important; height: 56px"
              src="@/assets/img/rent/ic_map@2x.png"
            />
          </div>
          <span class="rent_merchant_address">{{
            cabinetData.branchName
          }}</span>
        </div>
      </div>
      <div class="rent_card" v-cloak style="margin-top: 10px">
        <div class="rent_rules">
          {{ $t('wallet_preAuthorization') }}
        </div>
        <div class="rent_rules_text" style="padding-bottom: 0">
          <span>{{
            $t('wallet_frozeTips').replace(
              '$Prepayment',
              formatMoney(prepayment)
            )
          }}</span>
        </div>
      </div>
    </div>
    <dialog-rent
      :showMask="showMask"
      :title="$t('Ejecting_power_bank')"
    ></dialog-rent>
    <bottom-button
      @click="checkIsRent"
      :title="$t('home_toRent')"
      @clickText="isDisabled = !$event"
      :disabled="isDisabled"
      :agreementName="$t('login_termOfUse1')"
      CheckImg
      :showAmount="prepayment > 0"
      :frozenAmount="formatMoney(prepayment)"
      @clickAgreement="clickAgreement"
      background="#ffffff"
    >
    </bottom-button>

    <van-popup v-model="showPopup" round position="bottom">
      <div class="popup_box">
        <div class="close_title flex_center">
          {{ $t('rent_chooseAuthMethod') }}
        </div>

        <div
          v-if="isShowGoogle"
          v-show="showType == 1 || lastRentType == '3'"
          style="position: relative"
        >
          <div id="google-btn" style="padding: 0 14px"></div>
          <div style="height: 16px" v-if="isShowGoogleDiv"></div>
          <div
            class="login_recent_div"
            v-show="lastRentType == '3' && isShowGoogleDiv"
          >
            <span>{{ $t('login_recent') }}</span>
            <img src="@/assets/img/login/ic_extrusion@2x.png" alt="" />
          </div>
        </div>
        <div
          v-if="isShowApple"
          v-show="showType == 1 || lastRentType == '4'"
          style="position: relative"
        >
          <div id="apple-btn" style="padding: 0 14px"></div>
          <div style="height: 16px" v-if="isShowAppleDiv"></div>
          <div
            class="login_recent_div"
            v-show="lastRentType == '4' && isShowAppleDiv"
          >
            <span>{{ $t('login_recent') }}</span>
            <img src="@/assets/img/login/ic_extrusion@2x.png" alt="" />
          </div>
        </div>
        <div
          class="button_container_card"
          v-if="bankInfo"
          v-show="showType == 1 || lastRentType == '1'"
          @click="bankAuth"
        >
          <img
            :src="bankIconMap[bankInfo.bankName.toLowerCase() || 'default']"
            alt=""
            style="width: 44px; height: 32px; margin: 0 14px 0 44px"
          />
          <span class="card_number">**** **** **** {{ bankInfo.bankNo }}</span>
          <div class="login_recent_div" v-show="lastRentType == '1'">
            <span>{{ $t('login_recent') }}</span>
            <img src="@/assets/img/login/ic_extrusion@2x.png" alt="" />
          </div>
        </div>
        <div
          class="button_container_btn"
          :style="
            showType == 1 ? 'padding-bottom:44px;' : 'padding-bottom:16px;'
          "
          @click="toBind"
          v-show="showType == 1 || lastRentType == '2'"
        >
          <van-button round type="info" size="large">
            {{ $t('pre_authorize_with_card') }}
          </van-button>
          <div
            class="login_recent_div"
            style="right: 38px"
            v-show="lastRentType == '2'"
          >
            <span>{{ $t('login_recent') }}</span>
            <img src="@/assets/img/login/ic_extrusion@2x.png" alt="" />
          </div>
        </div>
        <div class="show_all" @click="showType = 1" v-show="showType == 2">
          {{ $t('Show_all') }}
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
import { loadStripe } from '@stripe/stripe-js'
export default {
  mixins: [share],
  data () {
    return {
      cabinetData: {
        // billing: {
        //   amount: 5, //周期费用
        //   controlType: 2, //计费周期期限类型：1-分 2-小时 3-天
        //   cycle: 1, //计费周期
        //   dayAmount: 8, //每日封顶费用
        //   freeDuration: 2, //免费时长
        //   freeDurationApplyOrderNum: null, //每天可应用免费时长的订单数
        //   freeDurationControlType: 1, //免费时长期限类型：1-分 2-小时 3-天
        //   id: 2,
        //   isSystem: false, //系统创建
        //   maxDurationControlType: 2, //最大租借时长期限类型：1-分 2-小时 3-天
        //   maxRentDuration: 120, //最大租借时长
        //   penaltyAmount: 40, //罚金
        //   platformId: 1, //平台id
        //   upfrontAmount: 0, //前置费用
        //   upfrontDuration: 0, //前置时长
        //   upfrontDurationControlType: 1 //前置时长期限类型：1-分 2-小时 3-天
        // },
        // branchName: '' //网点名称
      },
      params: '',
      tabList: [
        {
          value: 1,
          label: 'Lightning',
          imgs: require('@/assets/img/rent/ic_ios@2x.png')
        },
        {
          value: 2,
          label: 'Micro',
          imgs: require('@/assets/img/rent/ic_micro@2x.png')
        },
        {
          value: 3,
          label: 'Type-C',
          imgs: require('@/assets/img/rent/ic_typec@2x.png')
        }
      ],
      showMask: false,
      isDisabled: false,
      epositUrls: '',
      prepayment: 0,
      showPopup: false,
      isShowGoogle: true,
      isShowApple: true,
      isShowGoogleDiv: false,
      isShowAppleDiv: false,
      stripe: null,
      showType: 2,
      bankInfo: '',
      bankIconMap: {
        visa: require('@/assets/img/bank/visa.png'),
        master: require('@/assets/img/bank/mastercard@2x.png'),
        mastercard: require('@/assets/img/bank/mastercard@2x.png'),
        maestro: require('@/assets/img/bank/Maestro.png'),
        unionpay: require('@/assets/img/bank/unionpay@2x.png'),
        mnp: require('@/assets/img/bank/Group 216.png'),
        jcb: require('@/assets/img/bank/jcb.png'),
        default: require('@/assets/img/bank/default.png')
      },
      lastRentType: '' // 最近租借方式 1、stripe已绑卡 2、stripe输卡  3、谷歌  4、苹果  5、预付款
    }
  },
  created () {
    this.getLang()
    this.params = localStorage.getItem('device_info')
      ? JSON.parse(localStorage.getItem('device_info'))
      : ''
    this.getOrdersBillings()
  },
  async mounted () {
    localStorage.setItem('actionType', 'back')
    this.getConfig()
    this.getWalletInfo()
    this.stripe = await loadStripe(this.$stripeKye, {
      locale: this.$i18n.locale.toLocaleLowerCase()
    })
  },
  methods: {
    //初始化
    async initialize () {
      try {
        this.$store.commit('startLoading')
        if (!this.stripe)
          this.stripe = await loadStripe(this.$stripeKye, {
            locale: this.$i18n.locale.toLocaleLowerCase()
          })
        if (this.prepayment <= 0) {
          this.$store.commit('endLoading')
          return
        }
        this.isShowGoogle = true
        this.isShowApple = true
        this.initAppleBtn()
        this.initGoogleBtn()
      } catch (e) {
        // console.log(e, 1)
        if (e) {
          this.global.toast(e)
        }
        this.$store.commit('endLoading')
        // this.isShowLoadError = true
      }
    },

    async initGoogleBtn () {
      this.$store.commit('startLoading')
      //快捷支付按钮
      const options = {
        mode: 'payment',
        amount: parseInt(this.prepayment * 100),
        currency: 'usd',
        paymentMethodCreation: 'manual',
        // Customizable with appearance API.
        appearance: {
          variables: {
            borderRadius: '26px'
          }
        }
      }
      const elements = await this.stripe.elements(options)
      const expressCheckoutElement = await elements.create('expressCheckout', {
        layout: {
          maxColumns: 2,
          maxRows: 1
        },
        paymentMethods: {
          googlePay: 'always',
          applePay: 'never',
          link: 'never',
          paypal: 'never',
          amazonPay: 'never'
        },

        buttonTheme: {
          googlePay: 'black',
          applePay: 'black'
        },
        buttonHeight: 52,
        buttonType: {
          googlePay: 'plain'
        }
      })
      expressCheckoutElement.mount('#google-btn')
      expressCheckoutElement.on('ready', event => {
        this.$store.commit('endLoading')
        setTimeout(() => {
          const googleBtn = document.getElementById('google-btn')
          if (googleBtn.offsetHeight < 10) this.isShowGoogle = false
          else this.isShowGoogleDiv = true
          if (this.lastRentType == '3' && !this.isShowGoogleDiv) {
            this.lastRentType = ''
            this.showType = 1
          }
        }, 1000)
      })
      expressCheckoutElement.on('click', event => {
        event.resolve()
      })
      expressCheckoutElement.on('confirm', async e => {
        const { error: submitError } = await elements.submit()

        if (submitError) {
          this.global.toast(submitError.message, 5000)
          // console.log(submitError);
          return
        }

        const { error, paymentMethod } = await this.stripe.createPaymentMethod({
          elements: elements
        })

        if (error) {
          this.global.toast(error.message, 5000)
          // console.log(error);
          return
        }

        const res = await $api.home.creditRent({
          scanUrl: this.params.sno,
          source: 2,
          scene: 1,
          paymentTokenObject: paymentMethod.id,
          rentType: 2,
          paymentChannel: 'stripe'
        })

        if (res.code != '0') {
          this.global.toast(res.message)
          // console.log(res.message);
          return
        }

        this.$store.commit('startLoading')
        try {
          const { paymentIntent, error: payEroor } =
            await this.stripe.confirmCardPayment(res.data.resp.displayContent)
          if (payEroor) {
            // Handle error here
            // console.log(payEroor);
            this.global.toast(payEroor.message)
            this.$store.commit('endLoading')
          } else {
            // Handle successful payment here
            this.$store.commit('endLoading')
            this.showPopup = false
            this.showMask = true
            setTimeout(() => {
              this.$router.push({
                path: '/rent/loading',
                query: { orderNo: res.data.order.orderNo, lastRentType: '3' }
              })
              // localStorage.setItem('lastRentType', '3')
              this.showMask = false
            }, 2000)
          }
          this.$store.commit('endLoading')
        } catch (e) {
          // console.log(e)
          if (e) {
            this.global.toast(e)
            this.$store.commit('endLoading')
          }
        } finally {
          this.$store.commit('endLoading')
        }
      })
    },

    async initAppleBtn () {
      this.$store.commit('startLoading')
      //快捷支付按钮
      const options = {
        mode: 'payment',
        amount: parseInt(this.prepayment * 100),
        currency: 'usd',
        paymentMethodCreation: 'manual',
        // Customizable with appearance API.
        appearance: {
          variables: {
            borderRadius: '26px'
          }
        }
      }
      // Set up Stripe.js and Elements to use in checkout form
      const elements = await this.stripe.elements(options)
      const expressCheckoutElement = await elements.create('expressCheckout', {
        layout: {
          maxColumns: 2,
          maxRows: 1
        },
        paymentMethods: {
          googlePay: 'never',
          applePay: 'always',
          link: 'never',
          paypal: 'never',
          amazonPay: 'never'
        },

        buttonTheme: {
          googlePay: 'black',
          applePay: 'black'
        },
        buttonHeight: 52,
        buttonType: {
          googlePay: 'plain'
        }
      })
      expressCheckoutElement.mount('#apple-btn')
      expressCheckoutElement.on('ready', event => {
        this.$store.commit('endLoading')
        setTimeout(() => {
          const appleBtn = document.getElementById('apple-btn')
          if (appleBtn.offsetHeight < 10) this.isShowApple = false
          else this.isShowAppleDiv = true
          if (this.lastRentType == '4' && !this.isShowAppleDiv) {
            this.lastRentType = ''
            this.showType = 1
          }
        }, 1000)
      })
      expressCheckoutElement.on('click', event => {
        event.resolve()
      })
      expressCheckoutElement.on('confirm', async e => {
        const { error: submitError } = await elements.submit()

        if (submitError) {
          this.global.toast(submitError.message, 5000)
          return
        }

        const { error, paymentMethod } = await this.stripe.createPaymentMethod({
          elements: elements
        })

        if (error) {
          this.global.toast(error.message, 5000)
          return
        }

        const res = await $api.home.creditRent({
          scanUrl: this.params.sno,
          source: 2,
          scene: 1,
          paymentTokenObject: paymentMethod.id,
          rentType: 3,
          paymentChannel: 'stripe'
        })

        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }

        this.$store.commit('starpayResponsetLoading')
        try {
          const { paymentIntent, error: payEroor } =
            await this.stripe.confirmCardPayment(res.data.resp.displayContent)
          if (payEroor) {
            // Handle error here
            this.global.toast(payEroor.message)
            this.$store.commit('endLoading')
          } else {
            // Handle successful payment here
            this.$store.commit('endLoading')
            this.showPopup = false
            this.showMask = true
            setTimeout(() => {
              this.$router.push({
                path: '/rent/loading',
                query: { orderNo: res.data.order.orderNo, lastRentType: '4' }
              })
              // localStorage.setItem('lastRentType', '4')
              this.showMask = false
            }, 2000)
          }
          this.$store.commit('endLoading')
        } catch (e) {
          // console.log(e)
          if (e) {
            this.global.toast(e)
            this.$store.commit('endLoading')
          }
        } finally {
          this.$store.commit('endLoading')
        }
      })
    },

    // 获取钱包
    getWalletInfo () {
      return $api.user.getWallet().then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.bankInfo = res.data.cardList[0]
      })
    },

    //获取配置信息
    getConfig () {
      $api.login.getConfigs(true).then(res => {
        if (res.code == 0) {
          localStorage.setItem('configs', JSON.stringify(res.data))
          res.data.forEach(item => {
            if (item.key == 'terms-of-use') {
              this.epositUrls = item.value + `?lang=${this.$store.state.locale}`
            }
          })
        }
      })
    },

    //通过扫码编号获得计费规则
    getOrdersBillings () {
      $api.home.getOrdersBilling(this.params).then(res => {
        if (res.code == 0) {
          this.cabinetData = res.data
          this.prepayment = res.data.preAuthAmount
        } else {
          this.global.toast(res.message)
        }
      })
    },

    // 租借按钮
    checkIsRent () {
      return $api.home.getUserRent({ sno: this.params.sno }).then(res => {
        if (res.code == 0) {
          // 0:可以租借
          // 1：未交押金
          // 2：有未支付订单
          // 4：租借订单已达上限
          // 9:调查中的订单已达到上限
          if (res.data.rentOrNot == 0) {
            this.checkCredit()
          } else if (res.data.rentOrNot == 1) {
            this.checkCredit()
          } else if (res.data.rentOrNot == 2) {
            this.global.toast(this.$t('Dialog_HomeRent_Message2'))
          } else if (res.data.rentOrNot == 4) {
            this.global.toast(this.$t('Dialog_HomeRent_Message4'))
          } else if (res.data.rentOrNot == 9) {
            this.global.toast(this.$t('Dialog_HomeRent_Message9'))
          }
        } else {
          this.global.toast(res.message)
        }
      })
    },

    // 信用租借
    checkCredit () {
      $api.home
        .creditRent({
          scanUrl: this.params.sno,
          source: 2,
          paymentChannel: 'stripe'
        })
        .then(res => {
          if (res.code == 0 && res.data.scene > 1) {
            this.showMask = true
            setTimeout(() => {
              this.$router.push({
                path: '/rent/loading',
                query: { orderNo: res.data.order.orderNo }
              })
              this.showMask = false
            }, 2000)
          } else if (res.code == 0 && res.data.scene == 1) {
            if (this.lastRentType != '') {
              if (this.lastRentType == '1' && !this.bankInfo) {
                this.lastRentType = ''
                this.showType = 1
                return
              }
              this.showType = 2
            } else {
              this.showType = 1
            }
            this.showPopup = true
            this.initialize()
          } else {
            this.global.toast(res.message)
          }
        })
    },

    //租借充电宝
    rentPowerBank () {
      $api.home.rentOrders(this.params.sno).then(res => {
        if (res.code == 0) {
          this.showMask = true
          setTimeout(() => {
            this.$router.push({
              path: '/rent/loading',
              query: { orderNo: res.data.orderNo }
            })
            this.showMask = false
          }, 2000)
        } else {
          this.global.toast(res.message)
        }
      })
    },

    //协议
    clickAgreement () {
      if (!this.epositUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.epositUrls}?lang=${this.$store.state.locale}`,
          title: this.$t('login_termOfUse')
        })
      )
      this.$router.push({
        path: '/web-view'
      })
    },

    // 已绑卡授权
    async bankAuth () {
      const res = await $api.home.creditRent({
        scanUrl: this.params.sno,
        source: 2,
        rentType: 1,
        scene: 1,
        paymentChannel: 'stripe',
        bankcardId: this.bankInfo.id
      })

      if (res.code != '0') {
        this.global.toast(res.message)
        return
      }

      if (res.code == 0) {
        this.showPopup = false
        this.showMask = true
        setTimeout(() => {
          this.$router.push({
            path: '/rent/loading',
            query: { orderNo: res.data.order.orderNo, lastRentType: '1' }
          })
          this.showMask = false
        }, 2000)
        return
      }
    },

    // 绑卡租借
    toBind () {
      localStorage.setItem('actionType', 'bindCardRent')
      this.$router.push({ path: '/wallet/bind' })
    }
  }
}
</script>

<style lang="scss">
[v-cloak] {
  opacity: 0;
}
.container {
  background: #f5f5f7;
  .rent_result {
    width: calc(100% - 28px);
    padding: 44px 14px 186px;
    .rent_powerbank {
      flex: 1;
      text-align: center;
      .rent_powerbank_type {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        color: #383838;
        line-height: 16px;
        margin-top: 10px;
      }
    }
    .rent_card {
      background: #ffffff;
      border-radius: 24px;
      padding: 20px 14px 14px;
      .rent_rules {
        font-size: 17px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        padding: 0 6px;
      }
      .rent_rules_text {
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        color: #66666b;
        line-height: 15px;
        padding: 6px 6px 20px;
      }
      .rent_merchant {
        background: #f5f5f7;
        border-radius: 10px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        padding: 8px;
        .rent_merchant_map {
          width: 56px !important;
          height: 56px;
          margin-right: 12px;
          position: relative;
          .rent_merchant_location {
            position: absolute;
            width: 40px;
            height: 40px;
            left: 8px;
            top: 8px;
          }
        }
        .rent_merchant_address {
          flex: 1;
          font-size: 15px;
          font-weight: 600;
          text-align: left;
          color: #39404d;
          line-height: 18px;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 控制超出部分的处理方式 */
          text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        }
      }
    }
  }
}
.van-popup--bottom {
  border-radius: 30px 30px 0 0;
}
.popup_box {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  .close_title {
    position: relative;
    width: calc(100% - 28px);
    height: 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #39404d;
    line-height: 16px;
    padding: 18px 0px 34px 0;
    margin-left: 14px;
  }
  .button_container_btn {
    font-size: 17px;
    font-weight: Bold;
    color: var(--tertiary-color);
    display: flex;
    align-items: center;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    position: relative;

    ::v-deep .van-button--large {
      height: 52px;
    }
  }
  .button_container_card {
    margin: 0 14px;
    width: calc(100% - 28px);
    min-height: 52px;
    background: #f5f5f7;
    border-radius: 26px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    position: relative;
    .card_number {
      font-size: 14px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 16px;
    }
  }
  .login_recent_div {
    position: absolute;
    height: 20px;
    background: #e7ff55;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 24px;
    top: -10px;
    span {
      font-size: 12px;
      font-weight: 400;
      text-align: center;
      color: #000000;
      line-height: 14px;
      letter-spacing: 0.23px;
      margin: 0 16px;
    }
    img {
      width: 4px;
      height: 4px;
      position: absolute;
      top: 20px;
      left: 16px;
      margin-left: 0;
    }
  }
  .button_prepayment {
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
    line-height: 16px;
  }
  .button_prepayment_text {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    color: #aaaaac;
    line-height: 14px;
    padding: 10px 14px 28px 14px;
  }
  .show_all {
    padding: 12px 14px 44px 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-align: center;
    color: var(--text-color);
    line-height: 16px;
  }
}
</style>
